<template>
  <div class="info-panel">
    <div class="panel-section stats-section">
      <div class="section-header">
        <h3>实时统计</h3>
        <button class="section-close" @click.stop="emit('close')">✖</button>
      </div>
      <div key="stats" class="stats-grid">
        <div class="stat-item" v-for="item in statsList" :key="item.key">
          <span class="stat-number">{{ item.value }}</span>
          <span class="stat-label">{{ item.label }}</span>
        </div>
      </div>
      <div ref="chartRef" class="stats-chart"></div>
    </div>
  </div>
</template>

<script setup>
import {
  computed,
  defineProps,
  nextTick,
  onBeforeUnmount,
  onMounted,
  ref,
  watch,
} from "vue";
import * as echarts from "echarts";
const emit = defineEmits(["close"]);
const props = defineProps({
  totalDrones: {
    type: Number,
    required: true,
  },
  activeDrones: {
    type: Number,
    required: true,
  },
  activeTasks: {
    type: Number,
    required: true,
  },
  anomalyCount: {
    type: Number,
    required: true,
  },
});

const statsList = computed(() => [
  {
    key: "total",
    label: "无人机总数",
    value: Number(props.totalDrones) || 0,
  },
  {
    key: "active",
    label: "在线无人机",
    value: Number(props.activeDrones) || 0,
  },
  {
    key: "tasks",
    label: "执行中任务",
    value: Number(props.activeTasks) || 0,
  },
  {
    key: "anomaly",
    label: "异常事件",
    value: Number(props.anomalyCount) || 0,
  },
]);

const chartData = computed(() =>
  statsList.value.map((item) => ({
    ...item,
    shortLabel:
      item.key === "total"
        ? "总数"
        : item.key === "active"
        ? "在线"
        : item.key === "tasks"
        ? "任务"
        : "异常",
  }))
);

const chartRef = ref(null);
let chartInstance = null;

const resizeChart = () => {
  chartInstance?.resize();
};

const buildOption = () => {
  const categories = chartData.value.map((item) => item.shortLabel);
  const values = chartData.value.map((item) => item.value);
  return {
    grid: {
      left: 10,
      right: 10,
      top: 30,
      bottom: 10,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: { type: "shadow" },
      backgroundColor: "rgba(17, 24, 39, 0.92)",
      borderColor: "rgba(96, 165, 250, 0.35)",
      textStyle: { color: "#e5e7eb" },
      formatter(params) {
        if (!params?.length) return "";
        const [{ name, value }] = params;
        return `${name}：${value}`;
      },
    },
    xAxis: {
      type: "category",
      data: categories,
      axisLabel: { color: "#cbd5f5", fontSize: 12 },
      axisLine: {
        lineStyle: { color: "rgba(148, 163, 184, 0.35)" },
      },
      axisTick: { show: false },
    },
    yAxis: {
      type: "value",
      axisLabel: { color: "#94a3b8", fontSize: 12 },
      splitLine: {
        lineStyle: { color: "rgba(148, 163, 184, 0.18)" },
      },
    },
    series: [
      {
        type: "bar",
        barWidth: "42%",
        data: values,
        itemStyle: {
          borderRadius: [8, 8, 4, 4],
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#60a5fa" },
            { offset: 1, color: "#2563eb" },
          ]),
          shadowColor: "rgba(37, 99, 235, 0.35)",
          shadowBlur: 10,
        },
      },
    ],
  };
};

const renderChart = () => {
  if (!chartInstance && chartRef.value) {
    chartInstance = echarts.init(chartRef.value);
  }
  if (!chartInstance) return;
  chartInstance.setOption(buildOption());
};

onMounted(() => {
  nextTick(() => {
    renderChart();
    window.addEventListener("resize", resizeChart);
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
});

watch(
  chartData,
  () => {
    nextTick(renderChart);
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.section-close {
  border: none;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}

.section-close:hover {
  color: #e5e7eb;
}

.stats-chart {
  margin-top: 18px;
  height: 200px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(28, 36, 52, 0.72);
  box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.12);
  overflow: hidden;
}
</style>
